<template>
	<div class="use">
		<table-search :form-item="formItem" :on-submit="onSubmit" :on-reset="onSubmit"> </table-search>
		<el-button @click="handleA">获取</el-button>
		<!--  -->
		<table-paging
			ref="tablePaging"
			:no="true"
			:table-list="tableList"
			:table-column="tableColumnData"
			:table-buttons="tableButtons"
			:table-paging="tablePaging"
			:table-total="tableTotal"
			@handleSizeChange="handleSizeChange"
			@handleCrurentChange="handleCrurentChange"
		/>
	</div>
</template>

<script>
	import { tableSearch, tablePaging } from '@/components'
	import { formItem, tableColumn } from './config'
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	export default {
		components: {
			tableSearch,
			tablePaging
		},
		data() {
			return {
				input: '',
				formItem: formItem(this.onFocus), // 需要在data中定义
				tablePaging: { page: 1, pagesize: 20 },
				tableTotal: 102,
				tableColumnData: tableColumn(1, 10, this.edit, this.del, this.confirms),
				tableButtons: [
					{
						showType: 'btnGroup',
						size: 'mini',
						btns: [
							{
								name: '编辑1',
								type: 'info',
								plain: true,
								click: this.edit
							},
							{
								name: '删除',
								type: 'info',
								plain: true,
								click: this.del
							}
						]
					},
					{
						showType: 'confirm',
						name: '删除',
						click: this.handleDelete
					}
				],
				tableList1: [],
				tableList: [
					{
						date: '2016-05-02',
						name: '王小虎1',
						address: '上海市普陀区金沙江路 1518 弄'
					},
					{
						date: '2016-05-04',
						name: '王小虎2',
						address: '上海市普陀区金沙江路 1517 弄'
					},
					{
						date: '2016-05-01',
						name: '王小虎3',
						address: '上海市普陀区金沙江路 1519 弄'
					},
					{
						date: '2016-05-03',
						name: '王小虎4',
						address: '上海市普陀区金沙江路 1516 弄'
					}
				]
			}
		},
		computed: {
			// 数组的方式获取，常用这种
			...mapState('app', ['lang', 'userId', 'index']),
			// 对象的方式获取并重新命名，不常用
			// ...mapState({lang1: state => state.app.lang, userId: state => state.app.userId}),
			// ...mapState(['index']),
			...mapGetters('app', ['getUserId', 'getArr'])
		},
		methods: {
			...mapMutations('app', ['addIndex', 'one12']),
			...mapActions('app', ['increment']),

			handleA() {
				// this.addIndex()
				// console.log(this.getUserId)
				// console.log(this.lang, this.userId, this.index)
				// console.log(this.$refs.tablePaging.$data.multipleSelection)

				// getters 返回一个函数，给getters传参
				// console.log(this.getArr(3))

				// actions
				this.increment(2)
			},
			onFocus(v) {
				console.log(v)
				// console.log(v.target.value)
				// v.target.value = ''
			},
			onSubmit(values) {
				console.log(values)
			},
			handleDelete(e) {
				console.log(e)
			},
			edit(e) {
				console.log('编辑')
				console.log(e)
			},
			del(e) {
				console.log('删除')
				console.log(e)
			},
			confirms(e) {
				console.log(e)
			},
			handleSizeChange(e) {
				console.log(e)
			},
			handleCrurentChange(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.use {
		padding: 20px 20px;
	}
</style>
